<template>
    <view class="coupon-item  flex-row ai-center p-20 color-f  pos-relative" :style="{'background':couponItem.status==2?'#999':''}">
        <view class="content flex-2 line-height-48 ">
            <view class="flex-row ai-end ">
                <text class="size-48 m-right-10"><text class="size-30">￥</text>{{couponItem.value}}</text>
                <text class="size-30 omit">{{couponItem.name}}</text>
            </view>
            <view class="omit size-26" v-if="couponItem.type==3">
                满{{couponItem.full_value}}减{{couponItem.value}}
            </view>
            <view class="omit size-26" v-if="couponItem.type==1">
                全场所有商品，菜品通用
            </view>
            <view class="omit size-26" v-if="couponItem.type==2">
                指定菜品：{{couponItem.dishes_info.name}}
            </view>
            <view class="size-24">
                有效期：{{couponItem.start_time}} ~{{couponItem.end_time}}
            </view>
        </view>
        <view class="btn color-f size-32">
            <g-button size="mini" type="effect" @click="useCoupon" v-if="couponItem.status==0">使用</g-button>
            <text  v-if="couponItem.status==2">已过期</text>
        </view>
        <view class="circle-lump pos-absolute borderRadius-50" style="top :-25rpx;">

        </view>
        <view class="circle-lump pos-absolute borderRadius-50" style="bottom :-25rpx;">

        </view>
    </view>
</template>

<script>
    export default {
        props: {
            couponItem: {
                type: Object,
            },
        },
        data() {
            return {

            }
        },
        methods: {
            useCoupon() {
                switch (this.couponItem.type) {
                    case 1:
                        this.$f.jumpUrl('/pagesGoods/search/list?searchValue= ')
                        break;
                    case 2:
                        this.$f.jumpUrl('/pages/article/detail?title=' + this.couponItem.dishes_info.name + '&&id=' + this
                            .couponItem.dishes_info.id)
                        break;
                    case 3:
                        this.$f.jumpUrl('/pagesGoods/search/list?searchValue= ')
                        break;
                    default:
                        break;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .coupon-item {
        background: $color-theme;
        margin: 30rpx 30rpx;
        border-radius: 10rpx;

        .content {
            border-right: 1rpx dashed #eee;
        }

        .btn {
            padding-left: 60rpx;
            padding-right: 40rpx;
        }

        .circle-lump {
            background: #F5F5F5;
            width: 50rpx;
            height: 50rpx;
            left: 460rpx;
        }
    }
</style>
